<template>
  <div class="fenlei-container" @scroll="scrollPage" ref="scrollBox">
    <div class="adv-box">
      <img :src="$BASEPATH + listsBanner[0].path" v-if="listsBanner">
      <img src="@/assets/img/banner-lists.jpg" v-else>
    </div>
    <!-- <div class="select-nav-box" ref="selectNav">
      <div class="select-nav flex-box" :class="{'select-fixed':navFixed}">
        <p :class="{active:activeIndex===1}" @click="setActive(1)">综合</p>
        <p :class="[{active:activeIndex===2},{upcase:orderPrice},{lowercase:!orderPrice}]" class="nav-price iconfont-gb" @click="setActive(2)">价格</p>
        <p :class="{active:activeIndex===3}" @click="setActive(3)">上新</p>
      </div>
    </div> -->
    <div class="loading flex-box" v-if="!lists">
       <div class="loading-main">
        <loading/>
      </div>
    </div>
    <ul class="flex-box" v-else>
      <li v-for="(item,index) in lists" :key="index">
        <div class="img-box">
          <router-link :to="{ name: 'productdetail', params: { id: item.id }}" ><img  v-if="item.img" :src="$BASEPATH + item.img.path"></router-link>
        </div>
        <div class="content-box">
          <h3>{{item.name | resize(10)}}</h3>
          <p>{{item.prodDesc | resize(12)}}</p>
          <h4><span>￥</span>{{item.price}}<i v-if="item.marketPrice">￥{{item.marketPrice}}</i></h4>
          <!-- <div class="add-to-cart flex-box" :class="{'cart-active':activeView === index}" @click="addToCart(item, index)">
            <i class="icon iconfont-gb icon-gb-gouwuche"></i>
          </div> -->
        </div>
      </li>
    </ul>
    <div class="loading-data flex-box" :class="{active:showLoading}">
      {{loadingDes}}
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'categoryLists',
  data() {
    return {
      lists: '',
      activeView: '',
      activeIndex: 1,
      orderState: 1,
      orderPrice: true,
      navFixed: false,
      listsBanner: '',
      scrollToBottom: false,
      loadingDes: '加载更多数据',
      total: '',
      paramData: {
        categoryId: 'F7DA8F937564B03CE040A8C057E05D12',
        pageSize: 20,
        currentPage: 1
      },
      showLoading: false
    }
  },
  components: {},
  computed: {
    ...mapGetters({
      hasGoods: 'cart/hasGoods'
    })
  },
  filters: {
    resize: function(value, n) {
      if (!value) return ''
      value = value.toString()
      // return value.replace(/[\u0391-\uFFE5]/g, 'aa').length
      return value.length > n ? value.slice(0, n) + '...' : value
      // return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  methods: {
    ...mapActions({
      createGoodsToCart: 'cart/create_goods_to_cart',
      addGoodsFromCart: 'cart/add_goods_from_cart',
      addGoodsFromSelected: 'cart/add_goods_from_selected'
    }),
    scrollPage(e) {
      // console.log(e.target.scrollTop)
      // console.log(this.$refs.selectNav.offsetTop)
      let m = Math.floor(e.target.scrollTop), //滚动高度
        // n = this.$refs.selectNav.offsetTop, //元素距离顶部高度
        o = this.$refs.scrollBox.clientHeight,
        p = e.target.scrollHeight
      //判断页面滚动到底部
      if (p > o && m + o === p) {
        this.scrollToBottom = true
        this.showLoading = true
        if (this.lists.length < this.total) {
          this.loadingDes = '加载更多数据'
          this.paramData.currentPage++
          this.$API.getCategoryLists(this.paramData).then(data => {
            this.lists.push(...data.data.allList)
            this.showLoading = false
          })
        } else {
          this.loadingDes = '- 到底了 -'
          setTimeout(() => {
            this.showLoading = false
          }, 2500)
        }
      } else {
        this.scrollToBottom = false
      }
      // this.navFixed = m - n > 0 ? true : false //导航栏到顶就固定
    },
    sortA(key) {
      return (obj1, obj2) => Number(obj1[key]) - Number(obj2[key])
    },
    sortB(key) {
      return (obj1, obj2) => Number(obj2[key]) - Number(obj1[key])
    },
    setActive(index) {
      this.activeIndex = index
      if (index === 1) {
        this.orderState = 1
        this.lists.sort(this.sortA('id'))
      } else if (index === 2) {
        if (this.orderPrice) {
          this.orderState = 2
          this.lists.sort(this.sortA('priceN'))
        } else {
          this.orderState = 3
          this.lists.sort(this.sortB('priceN'))
        }
        this.orderPrice = !this.orderPrice
      } else {
        this.orderState = 3
      }
    },
    addToCart(item, index) {
      let hasGoods = this.hasGoods(item)
      let selectedGoods = this.$store.state.cart.cartSelected
      if (hasGoods) {
        //有，该商品的数量+1
        if (`p${item.id}` in selectedGoods) {
          this.addGoodsFromSelected(item)
          this.addGoodsFromCart(item)
        } else {
          this.addGoodsFromCart(item)
        }
        this.activeView = index
        this.$layer.open({
          content: '添加购物车成功',
          skin: 'msg',
          time: 1
        })
        setTimeout(() => {
          this.activeView = ''
        }, 1000)
      } else {
        //没有，购物车创建该商品
        item.num = 1
        this.createGoodsToCart(item)
        this.activeView = index
        this.$layer.open({
          content: '添加购物车成功',
          skin: 'msg',
          time: 1
        })
        setTimeout(() => {
          this.activeView = ''
        }, 1000)
      }
    }
  },
  created() {
    console.log(this.$route.params.id)
    this.paramData.categoryId = this.$route.params.id
    this.$axios
      .all([this.$API.getCategoryLists(this.paramData), this.$API.getCategoryTotal(this.paramData)])
      .then(
        this.$axios.spread((data, num) => {
          console.log(data)
          this.lists = data.data.allList
          this.listsBanner = data.data.imgList
          this.total = num.data
        })
      )
  },
  mounted() {}
}
</script>
<style scoped lang="scss">
.fenlei-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .select-nav-box {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
  }
  .loading {
    width: 100%;
    height: 400px;
    background: url('../assets/img/list-bg.png') center no-repeat;
    background-size: 100% 100%;
    .loading-main {
      width: 100px;
      height: 100px;
      // background: rgba($color: #fff, $alpha: 0.5);
      border-radius: 12px;
      // box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
    }
  }
  .select-nav {
    width: 100%;
    height: 36px;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    font-size: 14px;
    &.select-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
    }
    p {
      &.active {
        color: #1c93d0;
        &.nav-price {
          position: relative;
          font-size: 14px;
          &.lowercase {
            &::before {
              color: #1c93d0;
            }
          }
          &.upcase {
            &::after {
              color: #1c93d0;
            }
          }
        }
      }
    }
    .nav-price {
      position: relative;
      font-size: 14px;
      &::before {
        content: '\e616';
        display: inline-block;
        position: absolute;
        right: -15px;
        top: -2px;
        font-size: 12px;
        transform: rotateZ(270deg);
        -webkit-transform: rotateZ(270deg);
        color: #aaa;
      }
      &::after {
        content: '\e616';
        display: inline-block;
        position: absolute;
        right: -14px;
        top: 5px;
        font-size: 12px;
        transform: rotateZ(90deg);
        -webkit-transform: rotateZ(90deg);
        color: #aaa;
      }
    }
  }
  .adv-box {
    width: 100%;
    min-height: 80px;
    margin-bottom: 10px;
    background: url('../assets/img/gb-loading.gif') center no-repeat;
    img {
      width: 100%;
    }
  }
  .fixed-active {
    width: 100%;
    height: 36px;
  }
  ul {
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 24px;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    li {
      width: 49%;
      margin-bottom: 12px;
      .img-box {
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        background: #f8f8f8 url('../assets/img/loading.gif') center no-repeat;
      }
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .content-box {
        width: 100%;
        height: 60px;
        padding: 5px 10px;
        box-sizing: border-box;
        text-align: left;
        position: relative;
        h3 {
          font-size: 14px;
          line-height: 16px;
          margin-bottom: 4px;
          margin-top: 2px;
        }
        p {
          font-size: 10px;
          color: #999;
        }
        h4 {
          font-size: 16px;
          color: #fe7c02;
          line-height: 16px;
          margin-top: 4px;
          span {
            font-size: 12px;
            position: relative;
            top: -3px;
          }
          i {
            font-size: 12px;
            color: #999;
            margin-left: 8px;
            text-decoration: line-through;
          }
        }
        .add-to-cart {
          width: 18px;
          height: 18px;
          border: 1px solid #ccc;
          position: absolute;
          right: 8px;
          border-radius: 18px;
          top: 32px;
          i {
            font-size: 12px;
            position: absolute;
            top: 4px;
          }
        }
        .cart-active {
          border: 1px solid rgb(238, 141, 96);
          i {
            color: #fe9402;
          }
        }
      }
    }
  }
  .loading-data {
    width: 100%;
    opacity: 0;
    height: 28px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #eee;
    transition: opacity 0.05s ease-in-out;
    -webkit-transition: opacity 0.05s ease-in-out;
    &.active {
      opacity: 1;
    }
  }
}
</style>
